<!--
 * @Author: jinye.zhang
 * @Version: 1.0.0
 * @Date: 2021-09-08 09:47:28
 * @LastEditors: jinye.zhang
 * @LastEditTime: 2021-09-08 16:04:06
 * @Description: 钱包
-->
<template>
  <view class="wallet-container">
    <view class="card-container default-box-shadow">
      <view v-if="fundCardDetail" class="card-item" @click="goAccountList()">
        <image
          v-if="fundCardDetail.payment_type === '0'"
          src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01MIyfdQ2BzNSgYnzMZ_!!1888948409.png"
          mode="scaleToFill"
          class="card-icon"
        />
        <image
          v-else="fundCardDetail.payment_type === '1'"
          src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01UsAarc2BzNSfEIfot_!!1888948409.png"
          mode="scaleToFill"
          class="card-icon"
        />
        <view class="not-card-contentt">
          <view class="real_name">{{ fundCardDetail.real_name }}</view>
          <view class="card_no">{{ fundCardDetail.card_no }}</view>
        </view>
        <view class="arrow-right">
          <text class="add-tip">切换</text>
          <u-icon name="arrow-right" color="#56d39d" size="28"></u-icon>
        </view>
      </view>
      <view v-else class="card-item" @click="addCard('/pages/wallet/addCard')">
        <image
          src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01IuuWZm2BzNShHPBs4_!!1888948409.png"
          mode="scaleToFill"
          class="card-icon"
        />
        <view class="not-card-contentt">您还没添加收款信息~</view>
        <view class="arrow-right">
          <text class="add-tip">去添加收款账户</text>
          <u-icon name="arrow-right" color="#56d39d" size="28"></u-icon>
        </view>
      </view>
    </view>
    <!-- 优化 -->

    <!-- 钱包 -->
    <view class="wallet-card">
      <view class="wallet-header">
        <view class="left-content">
          <view class="title">可提现余额（元）</view>
          <view class="money">{{ balance > 0 ? balance : 0 || 0 }}</view>
        </view>
        <view @click="handleExtractionCash" class="right-btn">立即提现</view>
      </view>
      <view class="wallet-tip">
        温馨提示: <br>
        结算周期: T+1结算 <br>
        举例说明：6月1日产生的收益在6月2日单价更新后结算 <br>
        提现门槛为{{ money || 0 }}元； <br>
        收益数据需结算并进入可提现余额后，才可以提现； <br>
        提现时间:任何时间均可提现，提现24小时内到账； <br>
        如有提现失败，请立即联系平台客服
      </view>
      <view class="limit">
        <u-checkbox v-model="aggent" shape="circle" size="36rpx" label-size="24rpx" active-color="#56d39d">我已阅读并遵守</u-checkbox>
        <text @click="goAgreement" class="tip-text">《灵活就业合作伙伴协议》</text>
      </view>
    </view>

    <!-- 收益详情 -->
    <view class="earnings-container">
      <view class="earnings-content">
        <view class="item">
          <view class="money">{{ withdrawalDetail ? (withdrawalDetail.totalWithdrawalCashAmount || 0) : 0 }}</view>
          <view class="item-text">总提现（元）</view>
        </view>
        <view class="item">
          <view class="money">{{ withdrawalDetail ? (withdrawalDetail.nowWithdrawalCashAmount || 0) : 0 }}</view>
          <view class="item-text">提现中（元）</view>
        </view>
        <view class="item">
          <view class="money">{{ withdrawalDetail ? (withdrawalDetail.currentMonthWithdrawalCashAmount || 0) : 0 }}</view>
          <view class="item-text">本月总提现（元）</view>
        </view>
        <view class="item">
          <view class="money">{{ withdrawalDetail ? (withdrawalDetail.lastMonthWithdrawalCashAmount || 0) : 0 }}</view>
          <view class="item-text">上月总提现（元）</view>
        </view>
      </view>
    </view>

    <view class="card-container default-box-shadow">
      <view class="card-item card-item2" @click="goCashLog()">
        <image
          src="https://img.alicdn.com/imgextra/i2/1888948409/O1CN0178wBWT2BzNSbRmHLu_!!1888948409.png"
          mode="scaleToFill"
          class="card-icon2"
        />
        <view class="not-card-contentt">
          <view class="real_name">提现记录</view>
        </view>
        <view class="arrow-right">
          <u-icon name="arrow-right" color="#61646B" size="28"></u-icon>
        </view>
      </view>
      <view class="card-item card-item2" @click="goOrderEarnings()">
        <image
          src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01UJREwE2BzNSdqGySV_!!1888948409.png"
          mode="scaleToFill"
          class="card-icon2"
        />
        <view class="not-card-contentt">
          <view class="real_name">收益报表</view>
        </view>
        <view class="arrow-right">
          <u-icon name="arrow-right" color="#61646B" size="28"></u-icon>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import { getUserInfoById } from '@/api/user';
  import Title from '@/components/title/title';
  import { withdrawSetInfoByApplet, fundCardInfoById, newSubmitApply, fundExportDetail } from '@/api/financialManagement';
  import { mapGetters } from 'vuex';
  export default {
    components: {
      Title,
    },
    data() {
      return {
        fundCardDetail: null,
        fundCardId: '',
        name: 'wallet',
        cashAmountData: null,
        device_withdraw_date: null,
        fundList: [],
        nexDateStr: '',
        aggent: true,
        userAlipayInfo: {
          id: null,
          real_name: null,
          alipay_accout: null,
        },
        money: 0,
        balance: 0,
        withdrawalDetail: null
      }
    },
    computed: {
      ...mapGetters([
        'version',
      ]),
    },
    onShow(options) {
      this.getUserInfoById();
      this.getWithdrawSetInfo();
      this.fundCardId = options && options.id ? options.id : '';
      this.fundCardInfoById();
    },
    onLoad() {
      this.fundExportDetail();
    },
    methods: {

      // 获取账号详情
      fundCardInfoById(id) {
        fundCardInfoById({ id: this.fundCardId }).then(result => {
          if (result && result.data) {
            let data = result.data;
            this.fundCardDetail = data;
          }
        });
      },

      // 获取提现信息
      getWithdrawSetInfo() {
        withdrawSetInfoByApplet().then(result => {
          if (result && result.code === 200 && result.data && result.data.device_withdraw_date && result.data.device_withdraw_date.length > 0) {
            this.money = result.data.device_withdraw_min_cash;
          } else {
            uni.showModal({
              title: "提示",
              content: "未配置提现功能,不能使用提现功能，请联系商家。",
              showCancel: !1,
              success: res => {
                uni.reLaunch({ url: '/pages/index' }); // 设备连接失败前往首页
              }
            })
          }
        })
      },

      // 点击提现
      handleExtractionCash() {
        const that = this;
        uni.showModal({
          title: '温馨提示',
          confirmColor: '#56d39d',
          content: `将余额提现到指定收款账号`,
          confirmText: '我知道了',
          cancelText: '取消',
          success: res => {
            if (res.confirm) {
              that.extractionCash();
            }
          }
        });
      },

      // 提现
      extractionCash() {
        
        if (!this.aggent) {
          uni.showToast({
            title: "请先阅读《共享经济合作伙伴协议》",
            icon: 'none'
          });
          return;
        }

        const fundCardDetail = this.fundCardDetail;
        if (this.fundCardDetail && fundCardDetail.id) {
          let balance = parseFloat(this.balance);
          let money = parseFloat(this.money);
          if (balance >= money) {
            uni.showLoading({
              title: '提现申请中...',
              mask: true
            })
            // 申请提现
            newSubmitApply({
              fundCardId: fundCardDetail.id,
              type: 1, // 提现申请
            }).then(result => {
              uni.hideLoading();
              if (result && result.code === 200) {
                uni.showToast({
                  title: '提交申请成功',
                  icon: 'none',
                  mask: false
                });
                uni.reLaunch({ url: '/pages/mine/index' });
              }
            }).catch(() => {
              uni.hideLoading();
              uni.showToast({
                title: '提交申请失败',
                icon: 'none',
                mask: false
              });
            })
          } else {
            uni.showModal({
              title: '温馨提示',
              confirmColor: '#56d39d',
              content: `平台最低提现金额为${this.money}元`,
              showCancel: false,
              confirmText: '我知道了',
              success: function (res) {
                console.log(res);
              }
            });
          }
        } else {
          uni.showModal({
            title: '温馨提示',
            confirmColor: '#56d39d',
            content: '您好，需要设置提现账号，才可以提现哦~',
            success: function (res) {
              if (res.confirm) {
                // 重载
                uni.navigateTo({ url: '/pages/wallet/addCard' })
              } else if (res.cancel) {
                  console.log('用户点击取消');
              }
            }
          });
        }
      },

      // 根据用户id获取用户信息
      getUserInfoById() {
        getUserInfoById().then(result => {
          if (result && result.data) {
            this.balance = parseFloat(result.data.balance).toFixed(2);
          }
        })
      },

      // 用户提现报表
      fundExportDetail() {
        fundExportDetail().then(result => {
          if (result && result.data) {
            this.withdrawalDetail = result.data;
          }
        })
      },

      // 前往用户协议
      goAgreement() {
        uni.navigateTo({
          url: '/pages/about/agreement?showType=2'
        })
      },

      // 设置支付宝账号
      addCard(url) {
        uni.navigateTo({ url })
      },

      // 前往账户列表
      goAccountList() {
        uni.navigateTo({ url: '/pages/wallet/accountList' })
      },

      // 提现记录
      goCashLog() {
        uni.navigateTo({ url: '/pages/wallet/cashLog' })
      },

      // 自推抖音
      goOrderEarnings() {
        uni.navigateTo({ url: '/pages/earnings/myOrderEarnings' })
      }
    },
    onShareAppMessage() {
      console.log('分享');
    },
  }
</script>

<style lang="scss">
  page{
    background-color: #f5f5f5;
  }
  .wallet-container{
    padding: 32rpx;

    .card-container{
      padding: 24rpx 32rpx;
      border-radius: 16rpx;
      margin-bottom: 32rpx;
      box-shadow: 0 4px 30rpx 0 rgba(0,0,0,.06);
      background: #fff;

      .card-item{
        display: flex;
        align-items: center;

        .card-icon{
          width: 88rpx;
          height: 88rpx;
        }

        .card-icon2{
          width: 32rpx;
          height: 32rpx;
        }

        .not-card-contentt{ 
          margin-left: 24rpx;
          font-size: 28rpx;
          flex: 1;
        }

        .add-tip{
          color: $uni-color-primary;
          font-size: 28rpx;
        }

        .real_name{
          margin-left: 24rpx;
          font-size: 28rpx;
          margin-bottom: 6rpx;
        }

        .card_no{
          margin-left: 24rpx;
          font-size: 28rpx;
        }
      }

      .card-item2{
        padding: 32rpx 0;

        .not-card-contentt{
          margin-left: 12rpx;
        }

        .real_name{
          margin-left: 0;
        }
      }
    }

    .wallet-card{
      border-radius: 16rpx;
      padding: 32rpx;
      z-index: 1;
      box-shadow: 0 4px 30rpx 0 rgba(0,0,0,.06);
      border-radius: 16rpx;
      background: #fff;
      margin-bottom: 32rpx;

      .wallet-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;

        .right-btn{
          width: 200rpx;
          height: 74rpx;
          border: 2rpx solid #fff9ec;
          background: linear-gradient(0deg, $uni-color-primary, $uni-color-primary);
          border-radius: 37rpx;
          font-size: 30rpx;
          color: #fff;
          text-align: center;
          line-height: 74rpx;
        }

        .left-content{
          flex: 1;
          text-align: left;
        }

        .title{
          font-size: 32rpx;
          color: #61646B;
          margin-bottom: 20rpx;
        }

        .money{
          font-size: 70rpx;
          color: #333;
        }
      }

      .wallet-tip{
        color: #ea4e16;
        font-size: 24rpx;
        margin-bottom: 24rpx;
      }

      .limit{
        font-size: 24rpx;
        color: $uni-color-primary;

        ::v-deep .u-checkbox__label{
          color: $uni-color-primary;
          margin-right: 12rpx;
        }

        .tip-text{
          color: $uni-color-primary;
          text-decoration: underline;
        }
      }

    }

    .earnings-container{
      z-index: 1;
      box-shadow: 0 4px 30rpx 0 rgba(0,0,0,.06);
      background: #fff;
      padding: 24rpx 32rpx;
      border-radius: 16rpx;
      position: relative;
      margin-bottom: 32rpx;
    }

    .earnings-content{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 280rpx;

      .item{
        min-width: 50%;
        padding-right: 20rpx;

        .money{
          font-size: 40rpx;
          color: #0a0e11;
        }

        .item-text{
          font-size: 24rpx;
          color: #7d7e80;
          margin-top: 16rpx;
        }
      }
    }
  }



</style>
